iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0

前言

今日想要介紹 Deep Link,這邊我只有接收 deeplink 的連結實作,並沒有使用動態的 link。因為我沒有上架 google store。
firebase_dynamic_links 文件
Yes

Start

這篇要講述,如何讓一個連接跳到你的頁面,如果沒有註冊的話則會跳到 apple store or Google Store。

設定 YAML 檔案

dependencies:
  firebase_dynamic_links: ^2.0.9

Android Manifest.xml

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
  <data
    android:scheme="https"
    android:host="YOUR_SUBDOMAIN.page.link" />
</intent-filter>

IOS Capabilities 設定

在應用程序 Xcode 項目的Capabilities選項卡中,啟用Associated Domains並將以下內容添加到Associated Domains列表中

applinks:YOUR_URL_PREFIX

IOS Info.list

<key>FirebaseDynamicLinksCustomDomains</key>
<array>
  <string>https://example.com/promos</string>
  <string>https://example.com/links/share</string>
</array>

開始

Firebase 設定
https://ithelp.ithome.com.tw/upload/images/20210910/20134548KzY30D8guM.png

https://ithelp.ithome.com.tw/upload/images/20210910/20134548xBxpDLiGx9.png
https://ithelp.ithome.com.tw/upload/images/20210910/20134548l2TeZlrOYb.pnghttps://ithelp.ithome.com.tw/upload/images/20210910/20134548iKvRd9qjtt.pnghttps://ithelp.ithome.com.tw/upload/images/20210910/20134548Mns0gcLh4w.pnghttps://ithelp.ithome.com.tw/upload/images/20210910/20134548cQnpebHdQU.png

Deep link 接收

當 App 沒有在運行的話需要這個。

  @override
  void initState() {
    super.initState();
    initDynamicLinks();
  }
  
  void initDynamicLinks() async {
    /// 當 app 處於活動狀態
    FirebaseDynamicLinks.instance.onLink(
        onSuccess: (PendingDynamicLinkData? dynamicLink) async {
          final Uri? deepLink = dynamicLink?.link;

          if (deepLink != null) {
            Navigator.pushNamed(context, deepLink.path);
          }
        },
        onError: (OnLinkErrorException e) async {
          Navigator.pushNamed(context, '/error');
        }
    );
    /// 當 app 處於非活動狀態
    final PendingDynamicLinkData? data = await FirebaseDynamicLinks.instance.getInitialLink();
    final Uri? deepLink = data?.link;

    if (deepLink != null) {
      Navigator.pushNamed(context, deepLink.path);
    }
  }

創造一個 deepLink 並縮網址。

程式碼擷取擷取來自 => https://pub.dev/packages/firebase_dynamic_links
這邊是建立動態 deepLink。

這邊的 Sample Code 我沒有實作他,因為我沒有上架 google,所以沒有 google store 的 page url。
所以我在 AndroidParameters、IosParameters 都有加上 fall 的網址。

Future<void> _createDynamicLink() async {
  final DynamicLinkParameters parameters = DynamicLinkParameters(
    uriPrefix: 'https://2021it30.page.link/',
    link: Uri.parse('https://example.com/'),
    androidParameters: AndroidParameters(
        packageName: 'com.example.android',
        minimumVersion: 125,
        fallbackUrl: Uri.parse('https://www.google.com/')),
    iosParameters: IosParameters(
        bundleId: 'com.example.ios',
        minimumVersion: '1.0.1',
        appStoreId: '123456789',
        fallbackUrl: Uri.parse('https://www.google.com/')),
    googleAnalyticsParameters: GoogleAnalyticsParameters(
      campaign: 'example-promo',
      medium: 'social',
      source: 'orkut',
    ),
    itunesConnectAnalyticsParameters: ItunesConnectAnalyticsParameters(
      providerToken: '123456',
      campaignToken: 'example-promo',
    ),
    socialMetaTagParameters: SocialMetaTagParameters(
      title: 'Example of a Dynamic Link',
      description: 'This link works whether app is installed or not!',
    ),
  );

  final ShortDynamicLink shortDynamicLink = await parameters.buildShortLink();
  final Uri shortUrl = shortDynamicLink.shortUrl;
}

上一篇
【第十八天 - Flutter Cloud Messaging(下)】
下一篇
【第二十天 - Flutter 與 Android、iOS 溝通方式 - 官方範例講解】
系列文
Flutter - 複製貼上到開發套件之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言